<template>
    <div class="researchWarp">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="教研组相册" name="album">
                <ResearchAlbum />
            </el-tab-pane>
            <el-tab-pane label="教研活动" name="activity">
                <ResearchActivity />
            </el-tab-pane>
            <el-tab-pane label="教研成果" name="achievements">
                <ResearchAchievements />
            </el-tab-pane>
            <el-tab-pane label="教研资源" name="resources">
                <ResearchResources />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import ResearchAlbum from './researchAlbum.vue'
    import ResearchActivity from './researchActivity.vue'
    import ResearchAchievements from './researchAchievements.vue'
    import ResearchResources from './researchResources.vue'

    export default {
        components:{
            ResearchAlbum,
            ResearchActivity,
            ResearchAchievements,
            ResearchResources
        },
        data() {
            return {
                activeName: 'album', // tabs 标签页当前页\
            }
        },
        methods: {
            // tabs 标签页切换
            handleClick(tab, event) {
                // console.log(tab, event);
            },


        },
        created() {

        }
    }
</script>

<style lang="scss" scoped>
    .researchWarp {
        width: 81%;
        margin: 0 auto;
        background-color: white;
        box-sizing: border-box;
        padding: 0 15px;
        margin-top: 20px;
        min-height: calc(100vh - 85px);
    }
</style>
